<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        img{
            width: 100px;
            height:100px;
        }
    </style>
  </head>
  <body onload="console.log('body标签属性触发方式 Loaded!',event.type,event.target)">
    <img src="../../../static/image/02-rabbit.jpeg" onload="console.log('Image loaded.',event.type,event.target.src)">
  </body>
  <script>
    // load事件处理程序方式
    // 第一种 指定 load 事件处理程序的方式 是 JavaScript 方式
    window.addEventListener('load', (event) => {
      console.log('JavaScript 方式 触发 Loaded!', event.type, event.target);
    });
    // 第二种 指定 load 事件处理程序的方式是向<body>元素添加 onload 属性，
    /* 
    1.任何在 window 上发生的事件，都可以通过给<body>元素上对应的属性赋值来指定
    2.根据 DOM2 Events，load 事件应该在 document 而非 window 上触发。可是为了向后兼容，所有浏览器都在 window 上实现了 load 事件。(实践发现 chrome 上 document 还不生效)
    */
    /*load触发时机
     1.在 window 对象上，load 事件会在整个页面（包括所有外部资源如图片、JavaScript 文件和 CSS 文件）加载完成后触发。
     2.图片上也会触发load事件，包括DOM中的图片和非DOM中的图片。可以在HTML中直接给<img>元素的 onload 属性指定事件处理程序，当然也可以使用 javascript 方式。
     3.在通过 JavaScript 创建新<img>元素时，也可以给这个元素指定一个在加载完成后执行的事件处理程序,在这里，关键是要在赋值 src 属性前指定事件处理程序。
     4.<script>元素会在 JavaScript 文件加载完成后触发 load 事件，从而可以动态检测。与图片不同，要下载 JavaScript 文件必须同时指定 src 属性并把<script>元素添加到文档中。因此指定事件处理程序和指定 src 属性的顺序在这里并不重要。
     */
    window.addEventListener('load',()=>{
        const img = document.createElement('img');
        img.addEventListener('load',(event)=>{
            console.log('创建 img 元素时，指定事件处理程序',event.target.src);
        });
        document.body.appendChild(img);//下载图片并不一定要把<img>元素添加到文档，只要给它设置了 src 属性就会立即开始下载，也就会触发 load 事件。
        img.src="../../../static/image/02-rabbit.jpeg"
    })
    window.addEventListener('load',()=>{
        const scriptDOM = document.createElement('script');
        scriptDOM.addEventListener('load',(event)=>{
            console.log('创建 script 元素时，指定事件处理程序',event.type,event.target.src);
        });
        scriptDOM.src='./example.js';
        document.body.appendChild(scriptDOM);
    })
  </script>
</html>
